import React from "react";
import i18next from "i18next";
import Page from "../../components/Page";
import {
    Content,
    PledgeNftItem,
    UnStartView,
    MobileView,
    SwitchButton,
    FlexViewCenter,
    CountDown,
    TotalLockView,
    FlexViewBetween,
    MainButton, FlexViewCenterColumn
} from "../../components/components";
import ImageCommon from "../../assets/image/common/ImageCommon";
import {StyledTopBar} from "../../components/TopBar/TopBar";
import {useUpdateLogo} from "../../state/logoaction/hooks";
import styled from "styled-components";
import {colors, FishColors, FishDna, FishInfoCn, FishName, getFishCardSrc} from "../../common/common";
import NftStore from "../../components/Nft/NftStore";
import useBasisCash from "../../hooks/useBasisCash";
import useHandleTransactionReceipt from "../../hooks/useHandleTransactionReceipt";
import MyFishModal, {SelectCard} from "../../components/fishmodal/MyFishModal";
import useModal from "../../hooks/useModal";
import {decimalToBalance} from "../../basis-cash/ether-utils";
import FishModal, {FishCard, FishdiBitn} from "../../components/fishmodal/FishModal";
import useApprove, {ApprovalState} from "../../hooks/useApprove";
import {DepoManager} from "../../components/ComponentsManager";

const MyFishCard = React.memo(()=>{
    useUpdateLogo(ImageCommon.logo);
    const basisCash = useBasisCash();
    const coin="USDT";
    const [items, setItems] = React.useState([]);
    const lp_name = `NYC_${coin}_LP`;
    const [approveStatus, approve] = useApprove(basisCash?.externalTokens?.[lp_name], basisCash?.contracts?.FishCardOptions?.address);
    let fish_id='';
    React.useEffect(() => {
        if (basisCash) {
            basisCash.getOwnerOf().then(res => {
                console.log(res,"getOwnerOf");
                setItems(res);
            });
        }
    }, [basisCash]);
    // 充值lp
    function showRechargeModal(id:string){
        console.log(id,"fishid")
        fish_id = id;
        basisCash?.externalTokens?.[lp_name]?.displayedBalanceOf(basisCash.myAccount).then(res => {
            DepoManager.show({token:lp_name,displayBalance:res,confirm:rechargeLp,depo:false})
        });
    }
    function rechargeLp(amount:string) {
        console.log(fish_id,"fish_id")
        // console.log(basisCash?.contracts?.FishCardOptions)
        basisCash?.contracts?.FishCardOptions?.lpStake(fish_id,decimalToBalance(amount,18))
    }
    function burnFish(fishNumber:string) {
        basisCash?.contracts?.FishCardOptions?.burnFish(fishNumber);
    }
    return(
        <Page>
            <StyledTopBar
                bg={ImageCommon.banner_cay}
            >
            </StyledTopBar>
            <Content>
                <PledgeWrap>
                    {
                        items.map(item => {
                            return (
                                <FishCard
                                    item={item}
                                >
                                    <FlexViewCenterColumn>
                                        {
                                            approveStatus == ApprovalState.NOT_APPROVED
                                                ?
                                                <FishdiBitn onClick={() => {
                                                    approve()
                                                }}>授权{lp_name}</FishdiBitn>
                                                :
                                                <FishdiBitn
                                                    onClick={()=>{
                                                        showRechargeModal(item.number);
                                                    }}
                                                >充值{lp_name}</FishdiBitn>
                                        }
                                        <FishdiBitn
                                            onClick={()=>{
                                                burnFish(item.number);
                                            }}
                                        >销毁鱼卡</FishdiBitn>
                                    </FlexViewCenterColumn>
                                </FishCard>
                            )
                        })
                    }
                </PledgeWrap>
            </Content>
        </Page>
    )
})

const PledgeWrap = styled.div`
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    padding:50px;
    border: 2px solid #F27405;
    border-radius: 20px;
    background-color:${colors.FFFAF6};
    margin-bottom:50px;
    @media (max-width: 768px) {
       padding:0;
       border:0px solid #F27405;
       margin-bottom:0px;
       background-color:${colors.transparent};
       margin-bottom:30px;
       justify-content:center;
    };
`

export default MyFishCard;
